﻿<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>UAUI</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="icon" type="image/png" href="../assets/img/icon/favicon.png">
<link href="../assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/animate.min.css" rel="stylesheet">
<link href="../assets/css/module.css" rel="stylesheet">
<link href="preview.css" rel="stylesheet">
<script src="../assets/js/jquery-1.12.4.min.js"></script>
<script src="../assets/js/jquery.SuperSlide.js"></script>
</head>
<body>
	<div class="side doc-side">
		<a class="side-menu-btn" href="javascript:;">
			<i class="fa fa-chevron-circle-left animated fadeInRight"></i>
			<i class="fa fa-chevron-circle-right animated fadeInLeft"></i>
		</a>
		<div class="logo">
			<h1>UAUI</h1>
		</div>
		<div class="user-panel">
			<ul class="row-show pull-right">
				<li class="show"><a title="显示">显</a></li>
				<li class="hide"><a title="隐藏">隐</a></li>
			</ul>
			<ul class="demo pull-right">
				<li><a href="../demo/index.html" target="_blank" title="演示站点">演</a></li>
			</ul>
			<ul class="set-width">
				<li><a title="600px">小</a></li>
				<li><a title="800px">中</a></li>
				<li><a title="1000px">大</a></li>
				<li><a title="auto">全</a></li>
			</ul>
		</div>
		<div class="side-nav">
			<ul>
				<li class="active">
					<h3>
						<span><i class='fa fa-angle-down'></i></span>
						<a class="a1"><i class="fa fa-list"></i>基础模块</a>
					</h3>
					<ul class="sub-nav">
						<li><a href="#base"><i class="fa fa-circle-o"></i>基础</a></li>
						<li><a href="#grid"><i class="fa fa-circle-o"></i>栅格</a></li>
						<li><a href="#h1"><i class="fa fa-circle-o"></i>标题</a></li>
						<li><a href="#btn"><i class="fa fa-circle-o"></i>按钮</a></li>
						<li><a href="#table"><i class="fa fa-circle-o"></i>表格</a></li>
						<li><a href="#form"><i class="fa fa-circle-o"></i>表单</a></li>
						<li><a href="#icon"><i class="fa fa-circle-o"></i>图标</a></li>
					</ul>
				</li>
				<li>
					<h3>
						<span><i class='fa fa-angle-down'></i></span>
						<a class="a1"><i class="fa fa-list"></i>常用模块</a>
					</h3>
					<ul class="sub-nav">
						<li><a href="#path"><i class="fa fa-circle-o"></i>路径导航</a></li>
						<li><a href="#pager"><i class="fa fa-circle-o"></i>分页</a></li>
						<li><a href="#other-page"><i class="fa fa-circle-o"></i>翻页</a></li>
						<li><a href="#box"><i class="fa fa-circle-o"></i>盒子</a></li>
						<li><a href="#list"><i class="fa fa-circle-o"></i>列表</a></li>
						<li><a href="#article"><i class="fa fa-circle-o"></i>内容</a></li>
						<li><a href="#comment"><i class="fa fa-circle-o"></i>评论</a></li>
						<li><a href="#share"><i class="fa fa-circle-o"></i>分享</a></li>
					</ul>
				</li>
				<li>
					<h3>
						<span><i class='fa fa-angle-down'></i></span>
						<a class="a1"><i class="fa fa-list"></i>JS模块</a>
					</h3>
					<ul class="sub-nav">
						<li><a href="#focus"><i class="fa fa-circle-o"></i>焦点图</a></li>
						<li><a href="#alert"><i class="fa fa-circle-o"></i>警告窗</a></li>
						<li><a href="#modal"><i class="fa fa-circle-o"></i>模态窗</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="main doc-main">
		<div class="container" style="width: 1000px;">
			<div class="row" id="base">
				<div class="col-xs-12">
					<h1 class="doc-hd"><span>基础模块</span></h1>
					<p>所有的模块基于“预置样式”，预置样式尽量保留了元素原有样式特征，预置内容包括字体、字体大小、行高、颜色及部分样式等，将全局 <code>font-size</code> 设置为 <code>14px</code>，<code>line-height</code> 设置为 <code>1.42857</code>。这些属性直接赋予<code>&lt;body&gt;</code>元素和所有段落元素。另外，<code>&lt;p&gt;</code> （段落）元素还设置了 <code>1em</code> 行高（即 14px）的底部外边距（margin）。</p>
					
					<p>斜体[em/i]：<em>斜体</em> <i>斜体</i><br/>
					粗体[strong/b]：<b>粗体</b> <strong>粗体</strong><br/>
					删除线[del/s]：<del>删除线</del> <s>删除线</s><br/>
					下划线[ins/u]：<ins>下划线</ins> <u>下划线</u><br/>
					小号文本[small]：<small>小号文本</small><br/>
					</p>
					代码[pre]：<pre>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。虽然是春天，好像已是秋深了。</pre>
					<br>
					引用[blockquote]：<blockquote>引用</blockquote>
				</div>
			</div>
			<div class="row" id="grid">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>栅格</span></h2>
					<p>栅格系统依然采用传统布局，方便不同层次技术人员维护更新！</p>
					<div class="doc-example">
						<div class="grid">
							<div class="row">
								<div class="col-xs-4"><div class="box">侧栏 .col-xs-4</div></div>
								<div class="col-xs-8"><div class="box">主体 .col-xs-8</div></div>
							</div>
						</div>
						<div class="grid">
							<div class="row">
								<div class="col-xs-4 pull-right side"><div class="box">侧栏 .side</div></div>
								<div class="col-xs-8 main">
									<div class="row">
										<div class="col-xs-6 side"><div class="box">主体 .main > .col-xs-6</div></div>
										<div class="col-xs-6 main"><div class="box">主体 .main > .col-xs-6</div></div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="row" id="icon">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>图标</span><small>兼容IE7、兼容图片图标（否则使用Font-Awesome）！</small></h2>
					<ul>
						<li><i class="icons"></i>点状图标 </li>
						<li><i class="icons icons-arrow"></i>箭头图标</li>
					</ul>
				</div>
			</div>
			<div class="row" id="btn">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>按钮</span></h2>
					<div class="btn-group">
						<a class="btn btn-default btn-sm">按钮一</a>
						<a class="btn btn-primary">按钮一</a>
						<a class="btn btn-success btn-lg">按钮一</a>
					</div>
				</div>
			</div>
			<div class="row" id="nav">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>菜单</span></h2>
					<ul class="nav nav-pills nav-stacked">
						<li class="active"><a href="#"><i class="icons"></i>list 菜单</a></li>
						<li><a href="#"><i class="icons icons-arrow"></i>list 菜单</a></li>
						<li><a href="#"><i class="icons icons-arrow"></i>list 菜单</a></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<h1 class="doc-hd"><span>盒子</span></h1>
				</div>
			</div>
			<div class="row" id="box">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>盒子</span></h2>
					<div class="row">
						<div class="col-xs-2">
							<div class="box">
								<div class="hd">
									<a href="#" class="more">更多</a>
									<h3><span><i class="icons icons-arrow"></i>标题</span></h3>
								</div>
								<div class="bd">内容</div>
								<div class="fd">脚标</div>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="box box-default">
								<div class="hd">
									<a href="#" class="more">更多</a>
									<h3><span>标题</span></h3>
								</div>
								<div class="bd">内容</div>
								<div class="fd">脚标</div>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="box box-primary">
								<div class="hd">
									<a href="#" class="more">更多</a>
									<h3><span>标题</span></h3>
								</div>
								<div class="bd">内容</div>
								<div class="fd">脚标</div>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="box box-block">
								<div class="hd">
									<a href="#" class="more">更多</a>
									<h3><span>标题</span></h3>
								</div>
								<div class="bd">内容</div>
								<div class="fd">脚标</div>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="box box-side">
								<div class="hd">
									<a href="#" class="more">更多</a>
									<h3><span>标题</span></h3>
								</div>
								<div class="bd">内容</div>
								<div class="fd">脚标</div>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="box box-main">
								<div class="hd">
									<a href="#" class="more">更多</a>
									<h3><span>标题</span></h3>
								</div>
								<div class="bd">内容</div>
								<div class="fd">脚标</div>
							</div>
						</div>
					</div>
					<h2 class="doc-hd"><span>盒子切换</span></h2>
					<div class="row">
						<div class="col-xs-3">
							<div class="box">
								<div class="hd">
									<a class="more">更多</a>
									<ul>
										<li><a href="/">列表一</a></li>
										<li><a href="#">列表二</a></li>
									</ul>
								</div>
								<div class="bd">
									<ul class="list">
										<li><a>标题列表1-1</a></li>
										<li><a>标题列表1-2</a></li>
									</ul>
									<ul class="list">
										<li><a>标题列表2-1</a></li>
										<li><a>标题列表2-2</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-xs-3">
							<div class="box box-default">
								<div class="hd">
									<a class="more">更多</a>
									<ul>
										<li><a href="/">列表一</a></li>
										<li><a href="#">列表二</a></li>
									</ul>
								</div>
								<div class="bd">
									<ul class="list">
										<li><a>标题列表1-1</a></li>
										<li><a>标题列表1-2</a></li>
									</ul>
									<ul class="list">
										<li><a>标题列表2-1</a></li>
										<li><a>标题列表2-2</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-xs-3">
							<div class="box box-primary">
								<div class="hd">
									<a class="more">更多</a>
									<ul>
										<li><a href="/">列表一</a></li>
										<li><a href="#">列表二</a></li>
									</ul>
								</div>
								<div class="bd">
									<ul class="list">
										<li><a>标题列表1-1</a></li>
										<li><a>标题列表1-2</a></li>
									</ul>
									<ul class="list">
										<li><a>标题列表2-1</a></li>
										<li><a>标题列表2-2</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-xs-3">
							<div class="box box-block">
								<div class="hd">
									<a class="more">更多</a>
									<ul>
										<li><a href="/">列表一</a></li>
										<li><a href="#">列表二</a></li>
									</ul>
								</div>
								<div class="bd">
									<ul class="list">
										<li><a>标题列表1-1</a></li>
										<li><a>标题列表1-2</a></li>
									</ul>
									<ul class="list">
										<li><a>标题列表2-1</a></li>
										<li><a>标题列表2-2</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<h2 class="doc-hd"><span>多重盒子</span></h2>
					<div class="row">
						<div class="col-xs-12">
							<div class="box box-primary box-multi">
								<div class="hd hd-multi">
									<a class="more">更多</a>
									<ul>
										<li><a href="/">列表一</a></li>
										<li><a href="#">列表二</a></li>
									</ul>
								</div>
								<div class="bd bd-multi">
									<div class="box box-default">
										<div class="hd">
											<a href="#" class="more">更多</a>
											<h3><span>头条</span></h3>
										</div>
										<div class="bd">
											<ul class="list list-intro">
												<li class="t t-1">
													<div class="con">
														<div class="title"><h4><a href="">传今年新款iPhone配5.8英寸AMOLED屏及弧面玻璃</a></h4></div>
														<div class="intro">郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计... <a href="" class="more">[详细]</a></div>
													</div>
												</li>
											</ul>
										</div>
									</div>
									<div class="box box-block">
										<div class="hd">
											<a href="#" class="more">更多</a>
											<h3><span>信息列表</span></h3>
										</div>
										<div class="bd">
											<ul class="list">
												<li>
													<span class="date">2013-09-18</span>
													<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
												</li>
												<li>
													<span class="date">2013-09-18</span>
													<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<h1 class="doc-hd"><span>列表</span></h1>
				</div>
			</div>
			<div class="row" id="list">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>信息列表</span></h2>
					<h4 class="doc-hd">信息列表</h4>
					<ul class="list">
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表（新闻+隔行换色+经过）</h4>
					<ul class="list list-news list-even list-hover">
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
						<li class="even">
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
						<li class="split"></li>
						<li class="even">
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-线条</h4>
					<ul class="list list-line">
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-多行</h4>
					<ul class="list list-multi">
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程！</a></div>
						</li>
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-时间</h4>
					<ul class="list list-multi list-calendar">
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程！</a></div>
						</li>
						<li>
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-简介列表</h4>
					<ul class="list list-intro">
						<li class="t">
							<span class="date">2013-09-18</span>
							<div class="title"><a href=""><i class="icons"></i>我很囧，你保重晒晒旅行中的那些囧！</a></div>
							<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
						</li>
						<li class="t">
							<div class="pic"><a href="#"><img width="120" alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p1.jpg"></a></div>
							<div class="con">
								<div class="title"><a href="">有机会获得此书本活动进行3个月，每月送出三本书</a></div>
								<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
							</div>
						</li>
						<li class="t">
							<div class="title"><a href="">囧人囧事囧照，人在囧途，越囧越萌！</a></div>
							<div class="con">
								<div class="pic"><a href="#"><img width="150" alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p1.jpg"></a></div>
								<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
							</div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-头条列表</h4>
					<ul class="list list-intro">
						<li class="t t-1">
							<div class="con">
								<div class="title"><h4><a href="">传今年新款iPhone配5.8英寸AMOLED屏及弧面玻璃</a></h4></div>
								<div class="intro">郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计... <a href="" class="more">[详细]</a></div>
							</div>
						</li>
						<li class="n">
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。</a></div>
						</li>
						<li class="n">
							<span class="date">2013-09-18</span>
							<div class="title"><a href="#"><i class="icons"></i>圆通董事长喻渭蛟：估值175亿争快递第一股</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-图片列表</h4>
					<ul class="list list-shadow list-pic">
						<li>
							<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p1.jpg"></a></div>
							<div class="title"><a href="">谷歌Facebook空中互联网计划遇阻领空不让飞不让飞不让飞不让飞不让飞</a></div>
						</li>
						<li>
							<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p2.jpg"></a></div>
							<div class="title"><a href="">传谷歌将在Android手机中整合增强现实功能</a></div>
						</li>
						<li>
							<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p4.jpg"></a></div>
							<div class="title"><a href="">连续创业后的雕爷：梦想改变世界</a></div>
						</li>
						<li>
							<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p3.jpg"></a></div>
							<div class="title"><a href="">机器人专家：无人驾驶汽车尚未做好普及准备</a></div>
						</li>
						<li>
							<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p1.jpg"></a></div>
							<div class="title"><a href="">微软“超大号”Surface开售：起价8999美元</a></div>
						</li>
						<li>
							<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/img/p4.jpg"></a></div>
							<div class="title"><a href="">印度电商蓬勃发展国际巨头争相角逐</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-信件列表--（保留）</h4>
					<ul class="list list-letter">
						<li class="th">
							<span class="time">提交时间</span><span class="state">办理情况</span><span class="dep">受理部门</span> 信件主题
						</li>
						<li>
							<span class="time">04-08</span><span class="state"><span class="s0">待受理</span></span><span class="dep">市纪委</span><div class="title"><a href="#"><i class="icons icons-msg"></i>（测试）部分省（区市）食品药品监管局派驻纪检组长座谈会在广西南宁召开</a></div>
						</li>
						<li>
							<span class="time">04-08</span><span class="state"><span class="s1">已受理</span></span><span class="dep">市委组织部</span><div class="title"><a href="#"><i class="icons icons-msg"></i>（测试）全国爱卫会召开全国健康城市健康村镇建设座谈会暨健康城市试点启动会（测试）全国爱卫会召开全国健康城市健康村镇建设座谈会暨健康城市试点启动会</a></div>
						</li>
					</ul>
					<br/>
					<ul class="list list-letter list-even">
						<li class="th">
							<span class="time">提交时间</span><span class="state">办理情况</span><span class="dep">受理部门</span> 信件主题
						</li>
						<li>
							<span class="time">04-08</span><span class="state"><span class="s2">待受理</span></span><span class="dep">市纪委</span><div class="title"><a href="#"><i class="icons icons-msg"></i>（测试）部分省（区市）食品药品监管局派驻纪检组长座谈会在广西南宁召开部分省（区市）食品药品监管局派驻纪检组长座谈会在广西南宁召开</a></div>
						</li>
						<li class="even">
							<span class="time">04-08</span><span class="state"><span class="s3">已受理</span></span><span class="dep">市委组织部</span><div class="title"><a href="#"><i class="icons icons-msg"></i>（测试）全国爱卫会召开全国健康城市健康村镇建设座谈会暨健康城市试点启动会</a></div>
						</li>
					</ul>
					<h4 class="doc-hd">信息列表-表格列表（保留）</h4>
					<table class="list list-letter list-hover" width="100%">
						<tbody>
							<tr>
								<th class="num">编号</th>
								<th class="ico">&nbsp;</th>
								<th class="title">信件主题</th>
								<th class="dep">提交人</th>
								<th class="state">办理方式</th>
								<th class="time">信件日期</th>
							</tr>
							<tr>
								<td class="num">1</td>
								<td class="ico">
									<i class="icons icons-msg"></i>
								</td>
								<td class="title">
									<a href="#" title="国务院办公厅印发《关于划定并严守生态保护红线的若干意见》">国务院办公厅印发《关于划定并严守生态保护红线的若干意见》中共中央办公厅</a>
								</td>
								<td class="dep">测试昵称</td>
								<td class="state">
									<span class="s0">待办理</span>
								</td>
								<td class="time">05-05</td>
							</tr>
							<tr class="even">
								<td class="num">2</td>
								<td class="ico">
									<i class="icons icons-msg"></i>
								</td>
								<td class="title">
									<a href="#" title="农村老屋翻盖有补贴吗">农村老屋翻盖有补贴吗</a>
								</td>
								<td class="dep">张三</td>
								<td class="state">
									<span class="s3">已办理</span>
								</td>
								<td class="time">05-04</td>
							</tr>
						</tbody>
					</table>
					<h4 class="doc-hd">信息列表-表格列表</h4>
					<table class="table table-letter text-center table-hover" width="100%">
						<tbody>
							<tr>
								<th class="num">编号</th>
								<th class="ico">&nbsp;</th>
								<th class="title">信件主题</th>
								<th class="dep">提交人</th>
								<th class="state">办理方式</th>
								<th class="time">信件日期</th>
							</tr>
							<tr>
								<td class="num">1</td>
								<td class="ico">
									<i class="icons icons-msg"></i>
								</td>
								<td class="title">
									<a href="#" title="国务院办公厅印发《关于划定并严守生态保护红线的若干意见》">国务院办公厅印发《关于划定并严守生态保护红线的若干意见》中共中央办公厅</a>
								</td>
								<td class="dep">测试昵称</td>
								<td class="state">
									<span class="s0">待办理</span>
								</td>
								<td class="time">05-05</td>
							</tr>
							<tr class="even">
								<td class="num">2</td>
								<td class="ico">
									<i class="icons icons-msg"></i>
								</td>
								<td class="title">
									<a href="#" title="农村老屋翻盖有补贴吗">农村老屋翻盖有补贴吗</a>
								</td>
								<td class="dep">张三</td>
								<td class="state">
									<span class="s3">已办理</span>
								</td>
								<td class="time">05-04</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<h1 class="doc-hd"><span>焦点图</span></h1>
				</div>
			</div>
			<div class="row" id="focus">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>焦点图</span></h2>
					<div class="row">
						<div class="col-xs-12">
							<div class="focus focus-intro">
								<div class="focus-hd">
									<ul>
										<li class="li1"><span>1</span></li>
										<li class="li2"><span>2</span></li>
									</ul>
								</div>
								<div class="focus-bd">
									<ul>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p1.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程全国爱卫会召开电视电话会议部署“清洁家园 灭蚊防病”春季爱国卫生运动</a></div>
												<span class="date">发表时间：2017-05-27</span>
                            					<div class="intro">&#12288;&#12288;6月27日至30日，国家教育督导检查组对深圳市南山区、宝安区（含光明新区、龙华新区）进行了国家义务教育发展基本均衡区督导复查。本次复查重点检查2014年3月通过国家督导验收后的整改工作情况。国家督导检查组共随机抽检学校16所，通过查阅资料、区长答辩、分组座谈、网络问…</div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p2.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">罗新：“丝绸之路”的历史不能被浪漫化</a></div>
												<span class="date">发表时间：2017-05-27</span>
                            					<div class="intro">国家教育督导检查组对深圳市南山区、宝安区（含光明新区、龙华新区）进行了国家义务教育发展基本均衡区督导复查。本次复查重点检查2014年3月通过国家督导验收后的整改工作情况。国家督导检查组共随机抽检学校16所，通过查阅资料、区长答辩、分组座谈、网络问…</div>
												<div class="bg"></div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="clearfix"></div><br/>
						
						<div class="col-xs-6">
							<div class="focus">
								<div class="focus-hd">
									<ul>
										<li class="li1"><span>1</span></li>
										<li class="li2"><span>2</span></li>
										<li class="li3"><span>3</span></li>
										<li class="li4"><span>4</span></li>
									</ul>
								</div>
								<div class="focus-bd">
									<ul>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p1.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程全国爱卫会召开电视电话会议部署“清洁家园 灭蚊防病”春季爱国卫生运动</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p2.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">罗新：“丝绸之路”的历史不能被浪漫化</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p3.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p4.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">组织师生党员参观八路军驻兰州办事处纪念馆</a></div>
												<div class="bg"></div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="focus focus-icon">
								<div class="focus-hd">
									<ul>
										<li class="li1"><span>1</span></li>
										<li class="li2"><span>2</span></li>
										<li class="li3"><span>3</span></li>
										<li class="li4"><span>4</span></li>
									</ul>
								</div>
								<div class="focus-bd">
									<ul>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p2.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p1.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">微信提现今起开收手续费 每人1000元免费额度</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p4.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">组织师生党员参观八路军驻兰州办事处纪念馆</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p3.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
												<div class="bg"></div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="clearfix"></div><br/>

						<div class="col-xs-6">
							<div class="focus focus-pic">
								<div class="focus-hd">
									<ul>
										<li class="li1" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
											<div class="pic"><img src="../assets/img/p4.jpg"></div>
											<div class="title"><a>今天起一大批新规开始施行 全都和你息息相关！</a></div>
										</li>
										<li class="li2" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
											<div class="pic"><img src="../assets/img/p2.jpg"></div>
											<div class="title"><a>都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
										</li>
										<li class="li3" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
											<div class="pic"><img src="../assets/img/p1.jpg"></div>
											<div class="title"><a>都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
										</li>
										<li class="li4" title="都斛椰菜花">
											<div class="pic"><img src="../assets/img/p3.jpg"></div>
											<div class="title"><a>都斛椰菜花</a></div>
										</li>
									</ul>
								</div>
								<div class="focus-bd">
									<ul>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p4.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p3.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">索尼新专利：用手套控制虚拟现实设备</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p1.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">传特斯拉再挖苹果高管：或设计自主处理器</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p2.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">民营快递企业扎堆上市背后 行业痛点待解</a></div>
												<div class="bg"></div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="focus focus-pic-title">
								<div class="focus-hd">
									<ul>
										<li class="li1" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
											<div class="pic"><img src="../assets/img/p4.jpg"></div>
											<div class="title"><a>今天起一大批新规开始施行</a></div>
										</li>
										<li class="li2" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
											<div class="pic"><img src="../assets/img/p2.jpg"></div>
											<div class="title"><a>今天起一大批新规开始施行</a></div>
										</li>
										<li class="li3" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
											<div class="pic"><img src="../assets/img/p1.jpg"></div>
											<div class="title"><a>今天起一大批新规开始施行</a></div>
										</li>
										<li class="li4" title="都斛椰菜花">
											<div class="pic"><img src="../assets/img/p3.jpg"></div>
											<div class="title"><a>今天起一大批新规开始施行</a></div>
										</li>
									</ul>
								</div>
								<div class="focus-bd">
									<ul>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p4.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p3.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">索尼新专利：用手套控制虚拟现实设备</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p1.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">传特斯拉再挖苹果高管：或设计自主处理器</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p2.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">民营快递企业扎堆上市背后 行业痛点待解</a></div>
												<div class="bg"></div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="clearfix"></div><br/>

						<div class="col-xs-6">
							<div class="focus focus-ad">
								<div class="focus-hd">
									<ul>
										<li class="li1"><span>1</span></li>
										<li class="li2"><span>2</span></li>
										<li class="li3"><span>3</span></li>
										<li class="li4"><span>4</span></li>
									</ul>
								</div>
								<div class="focus-bd">
									<ul>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p3.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p4.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p2.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
												<div class="bg"></div>
											</div>
										</li>
										<li>
											<div class="pic"><a href="#"><img src="../assets/img/p1.jpg"></a></div>
											<div class="con">
												<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
												<div class="bg"></div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<script type="text/javascript">jQuery(".focus").slide({titCell:".focus-hd li",mainCell:".focus-bd ul",effect:"left",vis:"auto",autoPlay:true});</script>

					</div>
				</div>
			</div>
			<div class="row" id="share">
				<div class="col-xs-12">
					<h2 class="doc-hd"><span>分享</span></h2>
					<div class="bdsharebuttonbox"><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq"></a><a title="分享到百度新首页" href="#" class="bds_bdhome" data-cmd="bdhome"></a><a title="分享到腾讯朋友" href="#" class="bds_tqf" data-cmd="tqf"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到点点网" href="#" class="bds_diandian" data-cmd="diandian"></a><a title="分享到有道云笔记" href="#" class="bds_youdao" data-cmd="youdao"></a><a title="分享到复制网址" href="#" class="bds_copy" data-cmd="copy"></a><a href="#" class="bds_more" data-cmd="more"></a></div><script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
				</div>
			</div>
		</div>
	</div>
	<div class="bg-txt">
		<h1>UAUI轻型前端框架</h1>
		<p>基于bootstarp为网站项目而立，适用于各类型网站！</p>
	</div>
</body>
</html>
<!-- 内容页引用样式 -->
<script src="../assets/js/font-zoom.js"></script>
<!-- preview 引用文件 -->
<link href="jquery.mCustomScrollbar.min.css" rel="stylesheet">
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script src="preview.js"></script>
<script type="text/javascript">jQuery(".box").slide({delayTime: 0,startFun: function (i, c, s, t) { s.find(".more").attr("href", t.eq(i).find("a").attr("href")) }});</script>
